<template>
  <el-sub-menu v-if="menu.type === 1" :index="menu.path">
    <template #title>
      <el-icon><component :is="menu.icon"/></el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <menu-item 
      v-for="child in menu.children" 
      :key="child.id" 
      :menu="child"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="menu.path">
    <el-icon><component :is="menu.icon"/></el-icon>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script setup>
defineProps({
  menu: {
    type: Object,
    required: true
  }
})
</script> 